<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<!-- 阻止浏览器缓存页面内容 -->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=8">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<title>我的</title>
	<link rel="stylesheet" href="/stylesheets/root.css">
	<link rel="stylesheet" href="/stylesheets/main_bottom_line.css">
	<link rel="stylesheet" href="/stylesheets_copy/my.css">

</head>

<body>
	<div id="my_means">
		<div id="my_means_up">
			<!-- <div id="head"> -->
				<img id="head" style="border-radius: 50%;" class="portrait" >
			<!-- </div> -->
			<div id="means">
				<div id="name">
					<div class="name-box">
						<P name="u_name">用户昵称</P>
					</div>
					<a href="set_up.html">
						<img class="img01" src="/images/my/shezhi.png" alt="" />
					</a>
				</div>
				<div id="my_sign">
					<img class="img02" src="/images/my/xingbie_1.png" alt="" />
					<p class="brief"> &nbsp&nbsp这个人很懒，什么也没留下....</p>
				</div>
			</div>
		</div>
		<div id="my_means_under">
			<div class="data">
				<p>关注</p>
				<p>6</p>
			</div>
			<div class="data">
				<p>粉丝</p>
				<p>20</p>
			</div>
			<div class="data">
				<p>获赞</p>
				<p id="upvote_num"></p>
			</div>
		</div>
		<div id="option">
			<div class="options">
				<span>动态</span>
			</div>
			<div class="options">
				<a href="/webpage_copy/my/my-like.html">
					<span style="border: none;">赞过</span>
				</a>
			</div>
		</div>
		<div class="dynamic-list">
			<!-- 动态列表 -->
		</div>
		<div class="no-dynamic">
			<img src="/images/my/nothing1.png" alt="No Dynamic">
			<p class="no-dynamic-text">你好像没有发布动态哦...</p>
		</div>
		<!-- <div id="my-updates-none">
				<img src="/images/my/nothing1.png" alt="" />
				<span>您好像没有发表动态哦...</span>
			</div>	 -->
	</div>
	<!-- 底部导航栏 -->
	<div class="bottom-line">
		<div class="bottom-line-box">
			<div class="page-main-page" data-jumpUrl="/main.html">
				<img src="/images/main/shouye.png" alt="">
				<p class="button_text">首页</p>
			</div>
			<div class="page-activity-page" data-jumpUrl="/webpage_copy/activity.html">
				<img src="/images/main/huodong.png" alt="">
				<p class="button_text">活动</p>
			</div>
			<div class="add-btn" data-jumpUrl="/forum/forum-edit.html">
				<img src="/images/main/jiahao.png" alt="">
			</div>
			<div class="page-message-page" data-jumpUrl="/webpage_copy/massage/list_massage.html">
				<img src="/images/main/xinxi.png" alt="">
				<p class="button_text">消息</p>
			</div>
			<div class="page-self-page" data-jumpUrl="">
				<img src="/images/main/wode.png" alt="">
				<p class="button_text">我的</p>
			</div>
		</div>
	</div>
	</div>
	<script>
		// 这个来获取立即执行函数里面的数据
		let golbal_dynamicData = {};
		let laoyudgbflag = 0;

		// 本脚本的功能是使底部导航栏点击跳转链接可以生效
		const box = document.querySelector('.bottom-line-box');
		for (let i = 0; i < box.children.length; i++) {
			let tmp = box.children[i];
			console.log(tmp.dataset.jumpurl);
			if (tmp.dataset.jumpurl != "") {
				let jmp_a = document.createElement('a');
				jmp_a.href = tmp.dataset.jumpurl;
				tmp.addEventListener('click', () => {
					console.log(jmp_a);
					jmp_a.click();
				});
			}
		}

		// 得到"我的"页面中所需要的数据
		let values = localStorage.getItem("jwt");
		(function () {

			fetch('/user_message/userDetail', {
				method: 'GET',
				headers: {
					'authorization': values
				}
			}).then(response => {
				if (!response.ok) {
					throw new Error('网络请求错误: ' + response.status + ' ' + response.statusText);
				}
				return response.json();
			}).then(data => {
				data[0]['user_icon'] = data[0]['user_icon']['data']
					.map(code => String.fromCharCode(code)).join('');

				// 获取元素
				var upvoteElement = document.getElementById("upvote_num");
				let u_name = document.querySelector('.name-box p');  // 昵称
				let u_sex = document.querySelector('.img02');  // 性别
				let portrait = document.querySelector(".portrait");  // 头像
				let brief = document.querySelector(".brief");  // 简介
				// 修改内容
				portrait.src = data[0]['user_icon'] // 头像
				brief.textContent = data[0]['profile'] // 简介 

				upvoteElement.textContent = data[0]['total_upvotes'];
				
				u_name.textContent = data[0]['username']
				u_sex.src = data[0]['sex'] == '男' ? "/images/my/xingbie_1.png" : "/images/my/xingbie.png"
				// 假设你的动态数据是一个数组
				const dynamicData = data;

				// 检查动态数据是否存在
				if (data[0].image != null) {
					// 创建动态列表
					const dynamicList = document.querySelector(".dynamic-list");
					dynamicData.forEach(item => {
						const dynamicItem = document.createElement("div");
						dynamicItem.classList.add("dynamic-item");

						const dynamicImage = document.createElement("img");

						item.image = item.image['data']
							.map(code => String.fromCharCode(code)).join('');
						dynamicImage.src = item.image;
						dynamicItem.appendChild(dynamicImage);
						const dynamicText = document.createElement("div");
						dynamicText.classList.add("dynamic-text");
						dynamicText.textContent = item.text;
						dynamicItem.appendChild(dynamicText);
						dynamicList.appendChild(dynamicItem);
					});

					// 显示动态列表
					document.querySelector(".no-dynamic").style.display = "none";
				} else {
					// 显示占位符
					document.querySelector(".no-dynamic").style.display = "block";
				}
			}).catch(error => {
				console.error(error);
			})
		})();
	</script>
</body>
</html>
